<!--
 * @description: 电气 预测结果
 * @author: cuicui
 * @Date: 2023-11-23 11:55:06
 * @LastEditTime: 2023-11-30 14:00:37
 * @LastEditors: cuicui
-->
<template>
  <business-layout title='历史数据' custom-title>
    <div style='height: 100%;'>
      <div style='height: 50%;'>
        <div style='height: 25%'>
          <a-row>
            <a-form :form='form' layout='inline' @submit='handleQueryData'>
              <a-col>
                <h3 style='text-align: center'>新能源发电功率预测</h3>
              </a-col>
              <a-form-item label='监控点位'>
                <a-select style='width: 240px;' placeholder='请选择' @change='' v-decorator="['id']"
                          :options='selectList'>
                </a-select>
              </a-form-item>
              <a-form-item label='开始时间'>
                <a-date-picker v-decorator="['startTime' ]" valueFormat='YYYY-MM-DD 00:00:00'
                               format='YYYY-MM-DD 00:00:00' placeholder='请选择开始时间'
                               :disabled-date='startDisabledDate' />
              </a-form-item>
              <a-form-item label='结束时间'>
                <a-date-picker v-decorator="['endTime']" valueFormat='YYYY-MM-DD 23:59:59'
                               format='YYYY-MM-DD 23:59:59'
                               placeholder='请选择结束时间'
                               :disabled-date='endDisabledDate' />
              </a-form-item>
              <a-form-item label='预测类型'>
                <a-select style='width: 240px;' placeholder='请选择预测类型' @change=''
                          v-decorator="['forcastType',{initialValue: 4}]"
                          :options='forcastTypeList'>
                </a-select>
              </a-form-item>
              <a-form-item>
                <a-button type='primary' html-type='submit'>
                  <a-icon type='search' />
                  查询
                </a-button>
              </a-form-item>
            </a-form>
          </a-row>
        </div>
        <div style='height: 75%'>
          <line-chart
            v-show='xData.length'
            :unit='unit'
            legend-pos='bottom'
            :loading='loading'
            height='100%'
            width='100%'
            :id='"line-person-env"'
            :x-data='xData'
            :y-data='yData'
          />
          <a-empty style='height: 100%' v-show='!xData.length'></a-empty>
        </div>
      </div>

      <div style='height: 50%;'>
        <div style='height: 25%'>
          <a-row>
            <a-form :form='form1' layout='inline' @submit='handleQueryData1'>
              <a-col>
                <h3 style='text-align: center'>新能源发电量预测</h3>
              </a-col>
              <a-form-item label='监控点位'>
                <a-select style='width: 240px;' placeholder='请选择' @change='' v-decorator="['id']"
                          :options='selectList1'>
                </a-select>
              </a-form-item>
              <a-form-item label='开始时间'>
                <a-date-picker v-decorator="['startTime' ]" valueFormat='YYYY-MM-DD 00:00:00'
                               format='YYYY-MM-DD 00:00:00' placeholder='请选择开始时间'
                               :disabled-date='startDisabledDate1' />
              </a-form-item>
              <a-form-item label='结束时间'>
                <a-date-picker v-decorator="['endTime']" valueFormat='YYYY-MM-DD 23:59:59'
                               format='YYYY-MM-DD 23:59:59'
                               placeholder='请选择结束时间'
                               :disabled-date='endDisabledDate1' />
              </a-form-item>
              <a-form-item label='预测类型'>
                <a-select style='width: 240px;' placeholder='请选择预测类型' @change=''
                          v-decorator="['forcastType',{initialValue: 4}]"
                          :options='forcastTypeList'>
                </a-select>
              </a-form-item>
              <a-form-item>
                <a-button type='primary' html-type='submit'>
                  <a-icon type='search' />
                  查询
                </a-button>
              </a-form-item>
            </a-form>
          </a-row>
        </div>
        <div style='height: 75%'>
          <line-chart
            v-show='xData1.length'
            :unit='unit1'
            :loading='loading1'
            height='100%'
            legend-pos='bottom'
            width='100%'
            :id='"line-person-env1"'
            :x-data='xData1'
            :y-data='yData1'
          />
          <a-empty style='height: 100%' v-show='!xData1.length'></a-empty>
        </div>
      </div>


      <div style='height: 50%;'>
        <div style='height: 25%'>
          <a-row>
            <a-form :form='form2' layout='inline' @submit='handleQueryData2'>
              <a-col>
                <h3 style='text-align: center'>电负荷预测</h3>
              </a-col>
              <a-form-item label='监控点位'>
                <a-select style='width: 240px;' placeholder='请选择' @change='' v-decorator="['id']"
                          :options='selectList2'>
                </a-select>
              </a-form-item>
              <a-form-item label='开始时间'>
                <a-date-picker v-decorator="['startTime' ]" valueFormat='YYYY-MM-DD 00:00:00'
                               format='YYYY-MM-DD 00:00:00' placeholder='请选择开始时间'
                               :disabled-date='startDisabledDate2' />
              </a-form-item>
              <a-form-item label='结束时间'>
                <a-date-picker v-decorator="['endTime']" valueFormat='YYYY-MM-DD 23:59:59'
                               format='YYYY-MM-DD 23:59:59'
                               placeholder='请选择结束时间'
                               :disabled-date='endDisabledDate2' />
              </a-form-item>
              <a-form-item label='预测类型'>
                <a-select style='width: 240px;' placeholder='请选择预测类型' @change=''
                          v-decorator="['forcastType',{initialValue: 4}]"
                          :options='forcastTypeList'>
                </a-select>
              </a-form-item>
              <a-form-item>
                <a-button type='primary' html-type='submit'>
                  <a-icon type='search' />
                  查询
                </a-button>
              </a-form-item>
            </a-form>
          </a-row>
        </div>
        <div style='height: 75%'>
          <line-chart
            v-show='xData2.length'
            :unit='unit2'
            :loading='loading2'
            height='100%'
            legend-pos='bottom'
            width='100%'
            :id='"line-person-env2"'
            :x-data='xData2'
            :y-data='yData2'
          />
          <a-empty style='height: 100%' v-show='!xData2.length'></a-empty>
        </div>
      </div>
    </div>
  </business-layout>
</template>

<script>
import { LineChart, BarChart } from '@/business-components/charts'
import CreateChart from '@/business-components/create-chart/index.vue'
import CreateTab from '@/business-components/create-tab/index.vue'
import HistoryChartItem from '@/business-components/history-chart-item/index.vue'
import CreatePoint from '@/business-components/create-point/index.vue'
import { getForecastSelect, getForecastData } from '@/api/forecast'
import moment from 'moment/moment'

const pageType = 'history'
let mark = 0
export default {
  name: 'HistoryTime',
  mixins: [],
  components: {
    CreatePoint,
    CreateTab,
    LineChart,
    BarChart,
    CreateChart,
    HistoryChartItem
  },
  props: {},
  watch: {
    activeKey(val) {
      if (val) {
        this.findAllReportByPageId()
      }
    }
  },
  computed: {},
  data() {
    this.pageType = pageType
    return {
      activeKey: '',
      form: this.$form.createForm(this),
      form1: this.$form.createForm(this),
      form2: this.$form.createForm(this),
      selectList: [],
      selectList1: [],
      forcastTypeList: [
        {
          label: '4小时',
          key: 4,
          value: 4
        },
        {
          label: '24小时',
          key: 24,
          value: 24
        }
      ],
      selectList2: [],
      menuId: '',
      myBarChart: null,
      barSpinning: true,
      visible: false,
      loading: false,
      loading1: false,
      loading2: false,
      mdl: null,
      historyTimeModel: null,
      tabs: [],
      yData: [],
      xData: [],
      yData1: [],
      xData1: [],
      yData2: [],
      xData2: [],
      legendList: [
        {
          name: '预测数据'
        },
        {
          name: '实际数据'
        }
      ],
      unit: '',
      unit1: '',
      unit2: '',
      historyVisible: false,
      confirmLoading: false,
      reportList: []
    }
  },
  created() {
    this.getForecastSelect()
    this.getForecastSelect1()
    this.getForecastSelect2()
  },
  methods: {
    startDisabledDate(startValue) {
      const endValue = this.form.getFieldValue('endTime')
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > moment(endValue).valueOf()
    },
    endDisabledDate(endValue) {
      const startValue = this.form.getFieldValue('startTime')
      if (!startValue || !endValue) {
        return false
      }
      return moment(startValue).valueOf() >= endValue.valueOf()
    },
    startDisabledDate1(startValue) {
      const endValue = this.form1.getFieldValue('endTime')
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > moment(endValue).valueOf()
    },
    endDisabledDate1(endValue) {
      const startValue = this.form1.getFieldValue('startTime')
      if (!startValue || !endValue) {
        return false
      }
      return moment(startValue).valueOf() >= endValue.valueOf()
    },
    startDisabledDate2(startValue) {
      const endValue = this.form2.getFieldValue('endTime')
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > moment(endValue).valueOf()
    },
    endDisabledDate2(endValue) {
      const startValue = this.form2.getFieldValue('startTime')
      if (!startValue || !endValue) {
        return false
      }
      return moment(startValue).valueOf() >= endValue.valueOf()
    },
    getForecastSelect() {
      getForecastSelect({
        type: 1
      }).then(res => {
        this.selectList = res.map(item => {
          return {
            ...item,
            key: item.id,
            label: item.name
          }
        })
        this.form.setFieldsValue({
          // 'id': this.selectList[0].key
          'id': this.selectList[0].key
        })
        this.handleQueryData()
      })
    },
    getForecastSelect1() {
      getForecastSelect({
        type: 2
      }).then(res => {
        this.selectList1 = res.map(item => {
          return {
            ...item,
            key: item.id,
            label: item.name
          }
        })
        this.form1.setFieldsValue({
          // 'id': this.selectList1[0].key
          'id': this.selectList1[0].key
        })
        this.handleQueryData1()
      })
    },
    getForecastSelect2() {
      getForecastSelect({
        type: 3
      }).then(res => {
        this.selectList2 = res.map(item => {
          return {
            ...item,
            key: item.id,
            label: item.name
          }
        })
        this.form2.setFieldsValue({
          // 'id': this.selectList2[0].key
          'id': this.selectList2[0].key
        })
        this.handleQueryData2()
      })
    },
    handleQueryData(e) {
      e && e.preventDefault()
      this.loading = true
      const that = this
      const values = this.form.getFieldsValue(['id', 'startTime', 'endTime', 'forcastType'])
      getForecastData({
        type: 1,
        systemId: '',
        deviceId: '',
        ...values
      }).then(res => {
        const { dataItems, unit } = res
        this.unit = unit || 'kw'
        if (dataItems) {
          that.yData = dataItems.map(item => item.forecastValue ? Number(item.forecastValue).toFixed(2) : 0)
          that.xData = dataItems.map(item => item.forecastTime) || []
        } else {
          that.yData = []
          that.xData = []
        }
      })
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    handleQueryData1(e) {
      e && e.preventDefault()
      this.loading1 = true
      const that = this
      const values = this.form1.getFieldsValue(['id', 'startTime', 'endTime', 'forcastType'])
      getForecastData({
        type: 2,
        systemId: '',
        deviceId: '',
        ...values
      }).then(res => {
        const { dataItems, unit } = res
        this.unit1 = unit || 'kwh'
        if (dataItems) {
          that.yData1 = dataItems.map(item => item.forecastValue ? Number(item.forecastValue).toFixed(2) : 0)
          that.xData1 = dataItems.map(item => item.forecastTime) || []
        } else {
          that.yData1 = []
          that.xData1 = []
        }
      })
      setTimeout(() => {
        this.loading1 = false
      }, 1000)
    },
    handleQueryData2(e) {
      e && e.preventDefault()
      this.loading2 = true
      const that = this
      const values = this.form2.getFieldsValue(['id', 'startTime', 'endTime', 'forcastType'])
      getForecastData({
        type: 2,
        systemId: '',
        deviceId: '',
        ...values
      }).then(res => {
        const { dataItems, unit } = res
        this.unit2 = unit || 'kw'
        if (dataItems) {
          that.yData2 = dataItems.map(item => item.forecastValue ? Number(item.forecastValue).toFixed(2) : 0)
          that.xData2 = dataItems.map(item => item.forecastTime) || []
        } else {
          that.yData2 = []
          that.xData2 = []
        }
      })
      setTimeout(() => {
        this.loading2 = false
      }, 1000)
    }
  },
  mounted() {
  },
  updated() {
  },
  destroyed() {
  }
}
</script>
<style lang='less' scoped>
h3 {
  color: rgb(54, 97, 184);
  font-weight: bold;
  font-size: 24px;
}
</style>